<template>
  <view class="scroll-left">
    <scroll-view :scroll-y="true" :style="{'height': bottomHeight + 'px'}">
      <view v-for="(shopCate,i) in shopCateList" :key="i" :class="['shopCate-item' , i === active ? 'active' : '']" @click="changeItem(i)">
        <view>{{ shopCate.cat_name }}</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    name:"cate-bottom-left",
    props: ['bottomHeight'],
    data() {
      return {
        shopCateList: [],
        active: 0
      };
    },
    methods : {
      async getShopCateList() {
        await uni.$http.get('/api/public/v1/categories').then(res => {
          if (res.data.meta.status !== 200) {
            return uni.$showMsg()
          }
          this.shopCateList = res.data.message
        })
      },
      changeItem(i) {
        this.active = i
        this.$emit("getCurrentActiveId",i) 
      } 
    },
    created() {
      this.getShopCateList()
    }
  }
</script>

<style lang="scss" scoped>

.scroll-left {
  width: 120px;
  .shopCate-item {
    line-height: 60px;
    background-color: #f7f7f7;
    text-align: center;
    font-size: 12px;
    &.active {
      background-color: #ffffff;
      position: relative;
      
      &::before {
        content: " ";
        background-color: #ff0000;
        position: absolute;
        top: 50%;
        left: 0;
        width: 2px;
        height: 30px;
        transform: translateY(-50%);
      }
      
    }
  }
}



</style>